<html><head><meta charset="utf-8"><title>附录：项目中常用的 loader-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 6-4 附录：项目中常用的 loader
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                附录：项目中常用的 loader
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-22 15:36:22
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img2.mukewang.com/5cd965150001c63306400360.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">自信和希望是青年的特权。<p class="author">——大仲马</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节列出项目中常用的 Webpack Loader，大家在实际项目中有类似需求的可以直接通过本小节的介绍来快速查找使用。</p>
</div><div class="cl-preview-section"><h2 id="javascript-相关" style="font-size: 30px;">JavaScript 相关</h2>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/babel/babel-loader">babel-loader</a>：把 ES6 转换成 ES5；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/script-loader">script-loader</a>：可以将指定的模块 JavaScript 文件转成纯字符串通过<code>eval</code>方式执行；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/exports-loader">exports-loader</a>：可以导出指定的对象，例如<code>window.Zepto</code>；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/TypeStrong/ts-loader">ts-loader</a>：把 TypeScript 转换成 JavaScript；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/imports-loader">imports-loader</a>：将任意三方的对象添加到<code>window</code>对象中。</li>
</ul>
</div><div class="cl-preview-section"><h2 id="样式相关" style="font-size: 30px;">样式相关</h2>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/style-loader">style-loader</a>：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/css-loader">css-loader</a>：加载 CSS，支持模块化、压缩、文件导入等特性；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/postcss/postcss-loader">postcss-loader</a>：CSS 后处理器 postcss 的 loader；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/less-loader">less-loader</a>：把 less 代码转换成 CSS 代码；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/sass-loader">sass-loader</a>：把 SCSS/SASS 代码转换成 CSS 代码；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/yibn2008/fast-sass-loader">fast-sass-loader</a>：并行处理 SCSS/SASS 文件，比 Sass-loader 快 5~10 倍的 loader；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/shama/stylus-loader">stylus-loader</a>：把 Stylus 代码转换成 CSS 代码；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/mini-css-extract-plugin">mini-css-extract-plugin 的 loader</a>：将 CSS 样式内容提取到 CSS 文件中。</li>
</ul>
</div><div class="cl-preview-section"><h2 id="静态资源相关" style="font-size: 30px;">静态资源相关</h2>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/raw-loader">raw-loader</a>：把文本文件的内容加载到代码中去；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/file-loader">file-loader</a>：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/url-loader">url-loader</a>：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/html-loader">html-loader</a>：HTML 语法的 loader，可以处理 HTML 中的图片、CSS 等；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/bhovhannes/svg-url-loader">svg-url-loader</a>：把压缩后的 SVG 内容注入到代码中；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/peerigon/markdown-loader">markdown-loader</a>：把 Markdown 文件转换成 HTML；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/okonet/ejs-loader">ejs-loader</a>：把 EJS 模版编译成函数返回；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/pugjs/pug-loader">pug-loader</a>：把 Pug 模版转换成 JavaScript 函数返回；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/tcoopman/image-webpack-loader">image-webpack-loader</a>：加载并且压缩图片文件；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://www.npmjs.com/package/csv-loader">csv-loader</a>：加载 csv 文件内容；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://www.npmjs.com/package/xml-loader">xml-loader</a>：加载 xml 文件内容。</li>
</ul>
</div><div class="cl-preview-section"><h2 id="工程相关" style="font-size: 30px;">工程相关</h2>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/eslint-loader">eslint-loader</a>：通过 ESLint 检查 JavaScript 代码；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/wbuchwalter/tslint-loader">tslint-loader</a>：通过 TSLint 检查 TypeScript 代码；</li>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/webpack-contrib/mocha-loader">mocha-loader</a>：加载 Mocha 测试用例代码。</li>
</ul>
</div><div class="cl-preview-section"><h2 id="其他" style="font-size: 30px;">其他</h2>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><a href="https://github.com/vuejs/vue-loader">vue-loader</a>：加载 Vue.js 单文件组件。</li>
</ul>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/296">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    附录：项目中常用的插件
                                </p>
                            </div>
                        </a>
                                                        </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">0</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <div class="noData">                 <p>                     <i class="imv2-error_c"></i>                 </p>                 <p>目前暂无任何讨论</p>             </div>              </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>